<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue';
import { useDictionaryStore } from '../../store';
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { ApiStudent } from '../../api';



const {quslificationList}=storeToRefs(useDictionaryStore())
const model=reactive<API.Student.Add>({
     "stu_name":"",
    "stu_avatar":null,
    "stu_cls_id":null,
    "stu_sex":0,
    "stu_phone":"",
    "stu_phone2":"",
    "stu_born":"",
    "stu_qualification":0,
    "stu_school":"",
    "stu_major":"",
    "stu_address":"",
    "stu_remark":""
})
const show=ref<boolean>(false)
const formRef=ref<FormInstance|null>(null)
const emits=defineEmits<{(name:'save',model:API.Student.Add):void}>()
const roules:FormRules={
     stu_name:[{required:true,message:'请输入姓名',trigger:'blur'},
     {min:2,max:10,message:'请输入2-10位字符',trigger:'blur'}
     ],
     stu_sex:[{required:true,message:'请选择性别',trigger:'blur'}],
     stu_phone:[{required:true,message:'请输入联系电话',trigger:'blur'},
         {min:11,max:11,message:'请输入11位手机号',trigger:'blur'},
         //@ts-ignore
         {validator:async(rule, value, callback) =>{
             if(await ApiStudent.valid({stu_phone:value})>0){
                callback(new Error("联系电话已存在"))
             }else{
                callback()
             }
         },trigger:'blur'}
     ],
     stu_phone2:[{required:true,message:'请输入联系电话',trigger:'blur'},
         {min:11,max:11,message:'请输入11位手机号',trigger:'blur'},
         //@ts-ignore
         {validator:async(rule, value, callback) =>{
             if(await ApiStudent.valid({stu_phone:value})>0){
             }
         },trigger:'blur'}
     ],
     stu_born:[{required:true,message:'请选择出生日期',trigger:'blur'}],
     stu_qualification:[{required:true,message:'请选择学历',trigger:'blur'}],
     stu_school:[{required:true,message:'请输入学校',trigger:'blur'}],
     stu_major:[{required:true,message:'请输入专业',trigger:'blur'}],
     stu_address:[{required:true,message:'请输入地址',trigger:'blur'}],
}
const cancel=async()=>{
    await ElMessageBox.confirm("确定要取消吗？", "提示", { type: "warning" })
    show.value=false
}
const save=async()=>{
    await formRef.value?.validate()
    await ApiStudent.add(model)
    emits('save',model)
    show.value=false
    ElMessage.success("保存成功")
}
defineExpose({
    begin:()=>{
        formRef.value?.resetFields()
        model.stu_born=""
        model.stu_remark=""
        nextTick(()=> show.value=true)
    }
})
</script>

<template>
 <el-dialog title="新增学生" width="500px" v-model="show" >
     <el-form ref="formRef" :model="model" label-width="80px" :rules="roules">
         <el-form-item label="学生姓名" prop="stu_name">
            <el-input v-model="model.stu_name" placeholder="请输入学生姓名"></el-input>
         </el-form-item>
         <el-form-item label="性别" prop="stu_sex">
           <el-radio-group v-model="model.stu_sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item label="联系电话" prop="stu_phone">
            <el-input v-model="model.stu_phone" placeholder="请输入联系电话" maxlength="11" show-word-limit></el-input>
         </el-form-item>
         <el-form-item label="备用电话" prop="stu_phone2">
            <el-input v-model="model.stu_phone2" placeholder="请输入备用电话" maxlength="11" show-word-limit></el-input>
         </el-form-item>
         <el-form-item label="出生日期" >
            <el-date-picker v-model="model.stu_born" type="data" placeholder="请选择出生日期"   value-format="YYYY-MM-DD"></el-date-picker>
         </el-form-item>
         <el-form-item label="学历" prop="stu_qualification">
            <el-select v-model="model.stu_qualification">
                <el-option label="--请选择--" :value="0"></el-option>
                <el-option v-for="item in quslificationList" :key="item.dic_id" :label="item.dic_name" :value="item.dic_id">
                </el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="毕业院校" prop="stu_school">
            <el-input v-model="model.stu_school" placeholder="请输入毕业院校"></el-input>
         </el-form-item>
         <el-form-item label="专业名称" prop="stu_major">
            <el-input v-model="model.stu_major" placeholder="请输入专业名称"></el-input>
         </el-form-item>
         <el-form-item label="家庭住址" prop="stu_address">
            <el-input v-model="model.stu_address" placeholder="请输入家庭住址"></el-input>
         </el-form-item>
         <el-form-item label="学生备注">
            <el-input v-model="model.stu_remark" placeholder="请输入学生备注"></el-input>
         </el-form-item>
     </el-form>
     <div slot="footer">
         <el-button @click="cancel">取 消</el-button>
         <el-button type="primary" @click="save">确 定</el-button>
     </div>
 </el-dialog>
</template>



<style scoped lang="scss">

</style>